
<!-- 用户角色管理 -->
<template>
  <div style="padding: 0px; margin: 0px">
    <el-row style="background: #fff; height: 50px" class="pt-2 pb-2 pl-3 pr-3">
      <el-col :span="24">
        <div style="float: right; margin-top: 10px">
          <el-button
            type="primary"
            icon="el-icon-edit"
            plain
            style="margin-right: 10px"
            @click="allEditBatch"
            >批量修改角色</el-button
          >
        </div>
      </el-col>
    </el-row>
    <vxe-table
      ref="xTable"
      :height="heightY"
      :data="tableData"
      border
      highlight-current-row
      @current-change="handleCurrentRow"
      style="width: 100%"
    >
      <vxe-column type="checkbox" width="40" />
      <vxe-column field="userName" title="用户名称"></vxe-column>
      <vxe-column field="userNo" title="用户账号"></vxe-column>
      <vxe-column field="roleName" title="用户类型"></vxe-column>
      <vxe-column title="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            plain
            @click="handlClickuser(scope.row)"
            >修改角色</el-button
          >
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
      background
      align="left"
      :current-page.sync="pageCurrent"
      :page-size.sync="pageSize"
      :total="dataTotal"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      @page-change="handleSizeChange"
    >
    </vxe-pager>
    <userPop v-if="userPopFlag" ref="userPopRef" @initData="initData"></userPop>
  </div>
</template>
  
  <script>
import userPop from "@/views/datacentersg/archives/documentUser/userPop.vue";
import { getList } from "@/api/young/system/user/user.js";
import { getUserRole } from "@/api/datacentersg/achives/documentApi";
export default {
  components: { userPop },
  data() {
    return {
      tableData: [],
      heightY: window.innerHeight - 230 + "px",
      userPopFlag: false,
      currentRow: null,
      pageCurrent: 1,
      pageSize: 20,
      dataTotal: 0,
      multipleRow: [], //多选
      singleRow: [], //单选
    };
  },
  created() {
    this.initData();
  },
  methods: {
    handleCurrentRow(currentRow) {
      this.currentRow = currentRow.row;
    },
    // 修改角色
    handlClickuser(row) {
      this.singleRow = [];
      this.multipleRow = [];
      let records = [row];
      this.singleRow = records;
      this.userPopFlag = true;

      this.t_row = row
      this.$nextTick(() => {
        this.$refs.userPopRef.initUserPop(records);
      });
    },
    // 批量修改角色
    allEditBatch() {
      this.singleRow = [];
      this.multipleRow = [];
      const selectRecords = this.$refs.xTable.getCheckboxRecords();
      this.multipleRow = selectRecords;
      console.log('selectRecords', selectRecords)
      this.userPopFlag = true;
      if (selectRecords.length == 0) {
        this.$message({
          message: "请勾选人员",
          type: "warning",
        });
        return;
      }
      this.$nextTick(() => {
        this.$refs.userPopRef.initUserPop(selectRecords);
      });
    },
    initData() {
      var that = this;
      const params = {
        dataTotal: this.dataTotal,
        pageCurrent: this.pageCurrent,
        pageSize: this.pageSize,
      };
      // 并行地获取数据
      Promise.all([getList(params), getUserRole({ userId: "" })])
        .then(([listRes, roleRes]) => {
          if (listRes.result && roleRes.code === 0) {
            const { rows = [] } = listRes.resultdata
            const { res_data = [] } = roleRes.data
            that.pageCurrent = listRes.resultdata.page;
            that.dataTotal = listRes.resultdata.records;
            that.tableData = rows.map(e => {
              let item = res_data.find(f => f.userId === e.userId);
              let tdata = { ...e }
              if (item) {
                tdata['roleName'] = item.roleName
                tdata['roleId'] = item.roleId
              }
              return tdata
            })
          }
        })
        .catch((error) => {
          // 错误处理
        });
    },

    handleSizeChange(val) {
      this.pageCurrent = val.currentPage;
      this.pageSize = val.pageSize;
      this.initData();
    },
  },
};
</script>
  
  <style scoped>
>>> .vxe-header--column .vxe-cell--title {
  font-size: 12px;
  font-weight: normal;
  color: #909399;
}
>>> .vxe-cell--label {
  font-size: 12px;
}
</style>
  